<template>
    <div class="container">
        <div class="box">
            <div class="box-table">
                <div class="title">
                    <span>{{ title }}</span>
                </div>
                <div class="table-content">
                    <div class="upload">
                        <p>{{ subTitle }}</p>
                        <div class="upload">
                            <slot name="upload"></slot>
                        </div>
                    </div>
                    <div class="detail">
                        <slot name="detail"></slot>
                    </div>
                </div>
            </div>
            <slot name="dialog"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SubsystemBox',
    props: {
        title: {
            type: String,
            default: '',
        },
        subTitle: {
            type: String,
            default: '',
        },
    },
    data() {
        return {}
    },
    watch: {},
    computed: {},
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 0 2px 2px rgba($color: #999, $alpha: 0.4);
    border-radius: 3px;
    .box {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* 允许元素自动扩展 */
        flex-basis: 0; /* 初始大小设为 0，这将让元素占据剩余空间 */
        // padding: 15px;
        // box-sizing: border-box;
    }
}

.box-table {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
}

.title {
    height: 40px;
    span {
        display: inline-block;
        height: 100%;
        line-height: 40px;
        padding-left: 20px;
        box-sizing: border-box;
        background-image: linear-gradient(to right, #95b3dd, #fff);
    }
}
.table-content {
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 15px;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
    display: flex;
    justify-content: space-between;
    .upload {
        width: 60%;
        height: 100%;
        // background-color: pink;
        p {
            height: 50px;
            line-height: 50px;
        }
        .upload {
            width: 100%;
            height: calc(100% - 50px);
        }
    }
    .detail {
        width: 35%;
        height: 100%;
        // background-color: skyblue;
    }
}
</style>
